<template>
    <div id="detail">
        <detail-nav-bar class="detail-nav-bar"
        @clickTile="clickTile"
        ref="detailNav"
        ></detail-nav-bar>
        <scroll class="detail-scroll" 
        ref="scroll"
        :probe-typed='3' 
        @pushPosition = "PositionWatch">
            <!-- 商品轮播 -->
            <detail-swiper
            :top-image='topImages'
            ></detail-swiper>
            <!-- 商品基本信息 -->
            <detail-base-info
            :goodsInfo = 'goodsInfo'
            ></detail-base-info>
            <!-- 商家基本信息 -->
            <detail-shop-info 
            :shop-info="shopInfo">
            </detail-shop-info>
            <!-- 商品信息 -->
            <detail-goods-info
            :detail-goods="detailGoods"
            @ImageLoaded = "ImageLoaded"
            ref="detailGoods"
            ></detail-goods-info>
            <!-- 商品参数 -->
            <detail-goods-params
            :goods-param="goodsParam"
            ></detail-goods-params>
            <!-- 商品评论 -->
            <detail-rate-info
            :rate-info="rateInfo.list"
            :c-rate="rateInfo.cRate"
            
            ref="rateInfo"
            ></detail-rate-info>
            <!-- 推荐商品 -->
            <goods-list
            :goods-list="recommends"
            ref="goodsList"
            ></goods-list>
        </scroll>
        <!-- 底部购买栏 -->
        <detail-bottom-bar
        class="bottom-bar"
        @clickAddBuy="addBuy"
        ></detail-bottom-bar>

        <back-top @click.native = "gotoTop" v-show="isShowBackTop"></back-top>
    </div>
</template>

<script>
    import DetailNavBar from './childComps/DetailNavBar.vue'
    import DetailSwiper from './childComps/DetailSwiper.vue'
    import DetailBaseInfo from './childComps/DetailBaseInfo.vue'
    import DetailShopInfo from './childComps/DetailShopInfo.vue'
    import DetailGoodsInfo from './childComps/DetailGoodsInfo.vue'
    import DetailGoodsParams from './childComps/DetailGoodsParams.vue'
    import DetailRateInfo from './childComps/DetailRateInfo.vue'
    import DetailBottomBar from './childComps/DetailBottomBar.vue'

    import GoodsList from 'components/content/goods/goodsList.vue'

    import Scroll from 'components/common/scroll/Scroll.vue'

    import {requestDetail,requestDetailRecommend,GoodsInfo,ShopInfo,DetailGoods,GoodsParam} from 'network/detail.js'
   
   import {debounce} from 'common/debounce.js'
    import {BackTopMixin} from 'common/mixin.js'



    export default {
        name:'Detail',
        data () {
            return {
                iid:null,
                topImages:[],
                goodsInfo:{},
                shopInfo:{},
                detailGoods:{},
                goodsParam:{},
                rateInfo:{},
                recommends:[],
                offsetTops:{
                    0:0,
                    1:0,
                    2:0,
                    3:0
                },
            }
        },
        mixins:[BackTopMixin],
        components: {
            DetailNavBar,
            DetailSwiper,
            DetailBaseInfo,
            DetailShopInfo,
            DetailGoodsInfo,
            DetailGoodsParams,
            DetailRateInfo,
            DetailBottomBar,

            GoodsList,

            Scroll,
        },
        created(){
            this.iid = this.$route.params.iid
        },
        mounted(){
            requestDetail(this.iid)
            .then(res=>{
                const data= res.data.result
                // 轮播图信息提取
                this.topImages = data.itemInfo.topImages
                // 商品介绍信息提取
                this.goodsInfo = new GoodsInfo(data.itemInfo,data.columns,data.shopInfo.services)
                // 商店信息提取
                this.shopInfo = new ShopInfo(data.shopInfo)
                // 商品图片信息提取
                this.detailGoods = new DetailGoods(data.detailInfo)
                // 商品参数信息提取
                this.goodsParam = new GoodsParam(data.itemParams.info,data.itemParams.rule)
                // 用户评论信息
                this.rateInfo.list = data.rate.list?data.rate.list[0]:{}
                this.rateInfo.cRate = data.rate.cRate
            })
            // 获取推荐信息
            requestDetailRecommend()
            .then(res=>{
                this.recommends = res.data.data.list
            })
            //防抖刷新
            const refresh = debounce(this.$refs.scroll.refreshScroll,20)
            this.$bus.$on('detailImgLoaded',()=>{
                // 刷新
                refresh()
            })
        },
        methods:{
            ImageLoaded(){
                debounce(this.$refs.scroll.refreshScroll,20)()
                this.offsetTops[1] = -(this.$refs.detailGoods.$el.offsetTop-40)
                this.offsetTops[2] = -(this.$refs.rateInfo.$el.offsetTop-30)
                this.offsetTops[3] = -(this.$refs.goodsList.$el.offsetTop-50)
            },
            // 监听导航栏点击
            clickTile(index){
                this.$refs.scroll.scrollTo(0,this.offsetTops[index],1000)
            },
            PositionWatch(position){
                this.listenShowBT(position)
                if(position.y>this.offsetTops[1]){
                    this.$refs.detailNav.currentKey = 0
                }else if(position.y>this.offsetTops[2]){
                    this.$refs.detailNav.currentKey = 1
                }else if(position.y>this.offsetTops[3]){
                    this.$refs.detailNav.currentKey = 2
                }else{
                    this.$refs.detailNav.currentKey = 3
                }
            },
            addBuy(){
                const product = {}
                product.img = this.topImages[0]
                product.title = this.goodsInfo.title
                product.desc = this.goodsInfo.desc
                product.price = this.goodsInfo.lowNowPrice
                product.iid = this.iid

                this.$store.dispatch('addCart',product)
                .then(res=>{
                    this.$toast.show(res,1500)
                },rej=>{
                    console.log(rej)
                })
            }

        }
    }
</script>

<style scoped>
    #detail{
        position: relative;
        background: #ffffff;
        z-index: 9;
        height: 100vh;
    }
    .detail-nav-bar{
        background: #ffffff;
        position: relative;
        z-index: 1;
    }
    .detail-scroll{
        height: calc(100vh - 93px);
        overflow: hidden;
    }
</style>